<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚点和锚点链接</title>

    <style type="text/css">
        .wrapper {
            width: 80%;
            height: 400px;
            margin: 25px auto;
            border: 1px solid blue;
        }
        
        .wrapper a {
            display: inline-block;
            margin: 10px;
            text-decoration: none;
        }
    </style>
</head>

<body>

    <!-- 声明一个锚点 ( 此时 a 元素内部可以什么都没有 ) -->
    <a name="first"></a>
    <div class="wrapper">
        这是第1个DIV
        <a href="anchor.html#last">返回到第20个div</a>
    </div>
    <div class="wrapper">这是第2个DIV</div>
    <div class="wrapper">这是第3个DIV</div>
    <div class="wrapper">这是第4个DIV</div>
    <!-- 声明一个锚点 -->
    <a name="fifth"></a>
    <div class="wrapper">这是第5个DIV</div>
    <div class="wrapper">这是第6个DIV</div>
    <div class="wrapper">这是第7个DIV</div>
    <div class="wrapper">这是第8个DIV</div>
    <div class="wrapper">这是第9个DIV</div>
    <div class="wrapper">这是第10个DIV</div>
    <div class="wrapper">这是第11个DIV</div>
    <div class="wrapper">这是第12个DIV</div>
    <div class="wrapper">这是第13个DIV</div>
    <div class="wrapper">这是第14个DIV</div>
    <div class="wrapper">这是第15个DIV</div>
    <div class="wrapper">这是第16个DIV</div>
    <div class="wrapper">这是第17个DIV</div>
    <div class="wrapper">这是第18个DIV</div>
    <div class="wrapper">这是第19个DIV</div>
    <div class="wrapper">
        这是第20个DIV
        <p>锚点链接的通用写法是 href="页面名称#锚点名称"</p>
        <a href="anchor.html#first">返回到第1个div</a>
        <p>如果 锚点 与 锚点链接 在同一个 HTML 中，则可以省略 # 前的页面名称</p>
        <a href="#fifth">返回到第5个div</a>
    </div>
    <a name="last">底部</a>

</body>

</html>